<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>rotate</title>
    <style type="text/css">
        p{
            font-size: 15px;
            color: red;
            font-weight: bold;
        }
        #box1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .box1{
            transform: rotate(10deg);
            -webkit-transform:rotate(10deg);
            -moz-transform:rotate(10deg);
            -ms-transform:rotate(10deg);
        }
        .box2{
            transform: rotate(20deg);
            -webkit-transform:rotate(20deg);
            -moz-transform:rotate(20deg);
            -ms-transform:rotate(20deg);
        }
        .box3{
            transform: rotate(30deg);
            -webkit-transform:rotate(30deg);
            -moz-transform:rotate(30deg);
            -ms-transform:rotate(30deg);
        }
        .box4{
            transform: rotate(40deg);
            -webkit-transform:rotate(40deg);
            -moz-transform:rotate(40deg);
            -ms-transform:rotate(40deg);
        }
        .box5{
            transform: rotate(45deg);
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
        }
        .box6{
            transform: rotate(50deg);
            -webkit-transform:rotate(50deg);
            -moz-transform:rotate(50deg);
            -ms-transform:rotate(50deg);
        }
        .box7{
            transform: rotate(60deg);
            -webkit-transform:rotate(60deg);
            -moz-transform:rotate(60deg);
            -ms-transform:rotate(60deg);
        }
        .box8{
            transform: rotate(70deg);
            -webkit-transform: rotate(70deg);
            -moz-transform: rotate(70deg);
            -ms-transform: rotate(70deg);
        }
        .box9{
            transform: rotate(80deg);
            -webkit-transform: rotate(80deg);
            -moz-transform: rotate(80deg);
            -ms-transform: rotate(80deg);
        }
        .box10{
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        }
        .box11{
            transform: rotate(100deg);
            -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -ms-transform: rotate(100deg);
        }
        .box12{
            transform: rotate(110deg);
            -webkit-transform: rotate(110deg);
            -moz-transform: rotate(110deg);
            -ms-transform: rotate(110deg);
        }
        .box13{
            transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
        }
    </style>
</head>
<body>
<p>css属性：</p>
rotate
<br/>
<input type="radio" onclick="fn1()" name="se"/>rotate(10deg)
<br/>
<input type="radio" onclick="fn2()" name="se"/>rotate(20deg)
<br/>
<input type="radio" onclick="fn3()" name="se"/>rotate(30deg)
<br/>
<input type="radio" onclick="fn4()" name="se"/>rotate(40deg)
<br/>
<input type="radio" onclick="fn5()" name="se"/>rotate(45deg)
<br/>
<input type="radio" onclick="fn6()" name="se"/>rotate(50deg)
<br/>
<input type="radio" onclick="fn7()" name="se"/>rotate(60deg)
<br/>
<input type="radio" onclick="fn8()" name="se"/>rotate(70deg)
<br/>
<input type="radio" onclick="fn9()" name="se"/>rotate(80deg)
<br/>
<input type="radio" onclick="fn10()" name="se"/>rotate(90deg)
<br/>
<input type="radio" onclick="fn11()" name="se"/>rotate(100deg)
<br/>
<input type="radio" onclick="fn12()" name="se"/>rotate(110deg)
<br/>
<input type="radio" onclick="fn13()" name="se"/>rotate(120deg)

<p>结果</p>
<div id="box1">
    <div id="box2"></div>
</div>
</body>
<script type="text/javascript">
    function fn1(){
        var box2=document.getElementById("box2");
        box2.className="box1"
    }
    function fn2(){
        var box2=document.getElementById("box2");
        box2.className="box2"
    }
    function fn3(){
        var box2=document.getElementById("box2");
        box2.className="box3"
    }
    function fn4(){
        var box2=document.getElementById("box2");
        box2.className="box4"
    }
    function fn5(){
        var box2=document.getElementById("box2");
        box2.className="box5"
    }
    function fn6(){
        var box2=document.getElementById("box2");
        box2.className="box6"
    }
    function fn7(){
        var box2=document.getElementById("box2");
        box2.className="box7"
    }
    function fn8(){
        var box2=document.getElementById("box2");
        box2.className="box8"
    }
    function fn9(){
        var box2=document.getElementById("box2");
        box2.className="box9"
    }
    function fn10(){
        var box2=document.getElementById("box2");
        box2.className="box10"
    }
    function fn11(){
        var box2=document.getElementById("box2");
        box2.className="box11"
    }
    function fn12(){
        var box2=document.getElementById("box2");
        box2.className="box12"
    }
    function fn13(){
        var box2=document.getElementById("box2");
        box2.className="box13"
    }
</script>
</html>